<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Spirit Web</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
  <label for="input-show-settings"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></label>
  <input type="checkbox" id="input-show-settings" />
  <main id="visualization-container">
    <canvas id="webgl-canvas" width="300" height="300"></canvas>
    <div id="webgl-controls"><i class="fa fa-play" aria-hidden="true" id="btn-play"></i><!--<span class="spacer-25"></span><i class="fa fa-rotate-right" aria-hidden="true"></i><i class="fa fa-arrows" aria-hidden="true"></i><i class="fa fa-ellipsis-h" aria-hidden="true" id="btn-extended-controls"></i>--></div>
    <div id="webgl-extended-controls" class="hidden">
      <div>Reset camera</div>
      <div>Align camera along X axis</div>
      <div>Align camera along Y axis</div>
      <div>Align camera along Z axis</div>
    </div>
  </main>
  <aside id="settings-container">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-configurations">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-configurations" aria-expanded="true" aria-controls="collapse-configurations">
              Configurations
            </a>
          </h4>
        </div>
        <div id="collapse-configurations" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-configurations">
          <div class="panel-body">

            <h5>Basic Configuration</h5>
            <div class="well well-sm">
              <div class="text-center">
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default" id="button-random">Random</button>
                  <button type="button" class="btn btn-default" id="button-plusz">(0, 0, 1)</button>
                  <button type="button" class="btn btn-default" id="button-minusz">(0, 0, -1)</button>
                </div>
              </div>
            </div>
            <h5>Skyrmions</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-skyrmion-order" class="col-sm-3 control-label">Order: </label><div class="col-sm-9"><input type="text" id="input-skyrmion-order" class="form-control" value="1" /></div>
                </div>
                <div class="form-group">
                  <label for="input-skyrmion-phase" class="col-sm-3 control-label">Phase: </label><div class="col-sm-9"><input type="text" id="input-skyrmion-phase" class="form-control" value="0" /></div>
                </div>
                <div class="form-group">
                  <label for="input-skyrmion-radius" class="col-sm-3 control-label">Radius: </label><div class="col-sm-9"><input type="text" id="input-skyrmion-radius" class="form-control" value="5" /></div>
                </div>
                <div class="form-group">
                  <label for="input-skyrmion-positionx" class="col-sm-3 control-label">Position: </label><div class="col-sm-3"><input type="text" id="input-skyrmion-positionx" class="form-control" value="0" /></div>
                  <div class="col-sm-3"><input type="text" id="input-skyrmion-positiony" class="form-control" value="0" /></div><div class="col-sm-3"><input type="text" id="input-skyrmion-positionz" class="form-control" value="0" /></div>
                </div>
                <div class="form-group">
                  <div class="checkbox col-sm-6">
                    <label>
                      <input type="checkbox" id="input-skyrmion-updown"> up/down
                    </label>
                  </div>
                  <!--<div class="checkbox col-sm-6" id="input-skyrmion-rl">
                    <label>
                      <input type="checkbox"> R/L
                    </label>
                  </div>-->
                  <div class="checkbox col-sm-6">
                    <label>
                      <input type="checkbox" id="input-skyrmion-achiral"> achiral
                    </label>
                  </div>
                  <!--<div class="checkbox col-sm-6">
                    <label>
                      <input type="checkbox" id="input-skyrmion-exp"> experimental
                    </label>
                  </div>-->
                </div>
                <button type="button" class="btn btn-block btn-default" id="button-skyrmion-create">Create Skyrmion</button>
              </form>
            </div>
            <h5>Spin Spiral</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-spinspiral-axisx" class="col-sm-3 control-label">Axis: </label><div class="col-sm-3"><input type="text" id="input-spinspiral-axisx" class="form-control" value="0" /></div>
                  <div class="col-sm-3"><input type="text" id="input-spinspiral-axisy" class="form-control" value="0" /></div><div class="col-sm-3"><input type="text" id="input-spinspiral-axisz" class="form-control" value="1" /></div>
                </div>
                <div class="form-group">
                  <label for="input-spinspiral-angle" class="col-sm-3 control-label">Angle: </label><div class="col-sm-9"><input type="text" id="input-spinspiral-angle" class="form-control" value="30" /></div>
                </div>
                <div class="form-group">
                  <label for="select-spinspiral-wrt" class="col-sm-3 control-label">w.r.t: </label><div class="col-sm-9"><select id="select-spinspiral-wrt"><option value="Real Lattice">Real Lattice</option><option value="Reciprocal Lattice">Reciprocal Real Lattice</option><option value="Real Space">Real Space</option></select></div>
                </div>
                <div class="form-group">
                  <label for="input-spinspiral-qx" class="col-sm-3 control-label">q: </label><div class="col-sm-3"><input type="text" id="input-spinspiral-qx" class="form-control" value="0.1" /></div>
                  <div class="col-sm-3"><input type="text" id="input-spinspiral-qy" class="form-control" value="0" /></div><div class="col-sm-3"><input type="text" id="input-spinspiral-qz" class="form-control" value="0" /></div>
                </div>
                <button type="button" class="btn btn-block btn-default" id="button-spinspiral-create">Create Spin Spiral</button>
              </form>
            </div>
            <h5>Domain</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-domain-positionx" class="col-sm-3 control-label">Position: </label><div class="col-sm-3"><input type="text" id="input-domain-positionx" class="form-control" value="0" /></div>
                  <div class="col-sm-3"><input type="text" id="input-domain-positiony" class="form-control" value="0" /></div><div class="col-sm-3"><input type="text" id="input-domain-positionz" class="form-control" value="0" /></div>
                </div>
                <div class="form-group">
                  <label for="input-domain-directionx" class="col-sm-3 control-label">Direction: </label><div class="col-sm-3"><input type="text" id="input-domain-directionx" class="form-control" value="0" /></div>
                  <div class="col-sm-3"><input type="text" id="input-domain-directiony" class="form-control" value="0" /></div><div class="col-sm-3"><input type="text" id="input-domain-directionz" class="form-control" value="1" /></div>
                </div>
                <div class="form-group">
                  <label for="input-domain-borderx" class="col-sm-3 control-label">Border: </label><div class="col-sm-3"><input type="text" id="input-domain-borderx" class="form-control" value="-1" /></div>
                  <div class="col-sm-3"><input type="text" id="input-domain-bordery" class="form-control" value="-1" /></div><div class="col-sm-3"><input type="text" id="input-domain-borderz" class="form-control" value="-1" /></div>
                </div>
                <!--<div class="form-group">
                  <div class="radio col-sm-6">
                    <label><input type="radio" name="input-domain-wall-lessergreater">Lesser</label>
                  </div>
                  <div class="radio col-sm-6">
                    <label><input type="radio" name="input-domain-wall-lessergreater" checked id="input-domain-greater">Greater</label>
                  </div>
                </div>-->
                <button type="button" class="btn btn-block btn-default" id="button-domain-create">Create Domain Wall</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-transitions">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-transitions" aria-expanded="true" aria-controls="collapse-transitions">
              Transitions
            </a>
          </h4>
        </div>
        <div id="collapse-transitions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-transitions">
          <div class="panel-body">

            <h5>Homogeneous</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-homogeneous-minstate" class="col-sm-4 control-label">Between</label><div class="col-sm-3"><input type="text" id="input-homogeneous-minstate" class="form-control" value="1" /></div>
                  <label for="input-homogeneous-maxstate" class="col-sm-2 control-label">and </label><div class="col-sm-3"><input type="text" id="input-homogeneous-maxstate" class="form-control" value="7" /></div>
                </div>
                <button type="button" class="btn btn-block btn-default">Generate</button>
              </form>
            </div>

          </div>
        </div>
      </div>-->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-hamiltonian">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-hamiltonian" aria-expanded="true" aria-controls="collapse-hamiltonian">
              Hamiltonian
            </a>
          </h4>
        </div>
        <div id="collapse-hamiltonian" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-hamiltonian">
          <div class="panel-body">


            <!--<form class="form-inline">
              <div class="form-group">
                <label for="select-hamiltonian-applyto" class="col-sm-6 control-label">Apply to: </label><div class="col-sm-6"><select id="select-hamiltonian-applyto"><option>Current Image</option></select></div>
              </div>
            </form>-->

            <!--<h5>Current image interaction parameters</h5>
            <div class="well well-sm">-->
              <form class="form-horizontal">
                <div class="form-group">
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" id="input-periodical-a"> Periodical a
                    </label>
                  </div>
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" id="input-periodical-b"> Periodical b
                    </label>
                  </div>
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" id="input-periodical-c"> Periodical c
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="input-externalfield-muspin" class="col-sm-8 control-label">mu_spin: </label><div class="col-sm-4"><div class="input-group"><input type="text" id="input-externalfield-muspin" class="form-control" value="2" /><span class="input-group-addon">µ<sub>B</sub></span></div></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-5">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked="checked" id="input-externalfield">External Field
                      </label>
                    </div>
                  </div>
                  <label for="input-externalfield" class="col-sm-3 control-label">Magnitude</label><div class="col-sm-4"><div class="input-group"><input type="text" id="input-externalfield-magnitude" class="form-control" value="25" /><span class="input-group-addon">T</span></div></div>
                </div>
                <div class="form-group">
                  <label for="input-externalfield-directionx" class="col-sm-6 control-label">Direction: </label><div class="col-sm-2"><input type="text" id="input-externalfield-directionx" class="form-control" value="0" /></div>
                  <div class="col-sm-2"><input type="text" id="input-externalfield-directiony" class="form-control" value="0" /></div><div class="col-sm-2"><input type="text" id="input-externalfield-directionz" class="form-control" value="1" /></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked="checked" id="input-exchange">Exchange
                      </label>
                    </div>
                  </div>
                  <label for="input-dmi-magnitude" class="col-sm-4 control-label">Magnitudes</label>
                  <div class="col-sm-4"><div class="input-group"><input type="text" id="input-exchangemagnitudes1" class="form-control" value="10" /><span class="input-group-addon">meV</span></div></div><div class="col-sm-4"><div class="input-group"><input type="text" id="input-exchangemagnitudes2" class="form-control" value="0" /><span class="input-group-addon">meV</span></div></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-5">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked="checked" id="input-dmi">DMI
                      </label>
                    </div>
                  </div>
                  <label for="input-dmi-magnitude" class="col-sm-3 control-label">Magnitude</label><div class="col-sm-4"><div class="input-group"><input type="text" id="input-dmi-magnitude" class="form-control" value="6" /><span class="input-group-addon">meV</span></div></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-5">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked="checked" id="input-anisotropy">Anisotropy
                      </label>
                    </div>
                  </div>
                  <label for="input-anisotropy-magnitude" class="col-sm-3 control-label">Magnitude</label><div class="col-sm-4"><div class="input-group"><input type="text" id="input-anisotropy-magnitude" class="form-control" value="0" /><span class="input-group-addon">meV</span></div></div>
                </div>
                <div class="form-group">
                  <label for="input-anisotropy-directionx" class="col-sm-6 control-label">Direction: </label><div class="col-sm-2"><input type="text" id="input-anisotropy-directionx" class="form-control" value="0" /></div>
                  <div class="col-sm-2"><input type="text" id="input-anisotropy-directiony" class="form-control" value="0" /></div><div class="col-sm-2"><input type="text" id="input-anisotropy-directionz" class="form-control" value="1" /></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-5">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" id="input-ddi">Dipole-dipole
                      </label>
                    </div>
                  </div>
                </div>
              </form>
            <!--</div>-->

          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-parameters">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-parameters" aria-expanded="true" aria-controls="collapse-parameters">
              LLG Parameters
            </a>
          </h4>
        </div>
        <div id="collapse-parameters" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-parameters">
          <div class="panel-body">


            <!--<form class="form-inline">
              <div class="form-group">
                <label for="select-parameters-applyto" class="col-sm-6 control-label">Apply to: </label><div class="col-sm-6"><select id="select-parameters-applyto"><option>Current Image</option></select></div>
              </div>
            </form>-->


            <!--<h5>LLG Parameters</h5>-->
            <!--<div class="well well-sm">-->
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-llg-damping" class="col-sm-6 control-label">Damping: </label><div class="col-sm-6"><input type="text" id="input-llg-damping" class="form-control" value="0.3" /></div>
                </div>
                <div class="form-group">
                  <label for="input-llg-timestep" class="col-sm-6 control-label">Time Step: </label><div class="col-sm-6"><div class="input-group"><input type="text" id="input-llg-timestep" class="form-control" value="0.01" /><span class="input-group-addon">ps</span></div></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-5">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" id="input-spintorque">Spin Torque
                      </label>
                    </div>
                  </div>
                  <label for="input-spintorque-magnitude" class="col-sm-3 control-label">Magnitude</label><div class="col-sm-4"><div class="input-group"><input type="text" id="input-spintorque-magnitude" class="form-control" value="1" /><span class="input-group-addon">arb.</span></div></div>
                </div>
                <div class="form-group">
                  <label for="input-spintorque-directionx" class="col-sm-6 control-label">Polarization: </label><div class="col-sm-2"><input type="text" id="input-spintorque-directionx" class="form-control" value="1" /></div>
                  <div class="col-sm-2"><input type="text" id="input-spintorque-directiony" class="form-control" value="0" /></div><div class="col-sm-2"><input type="text" id="input-spintorque-directionz" class="form-control" value="0" /></div>
                </div>
                <div class="form-group">
                <div class="col-sm-8">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="input-temperature">Temperature
                  </label>
                </div>
                </div>
                  <div class="col-sm-4"><div class="input-group"><input type="text" id="input-temperature-value" class="form-control" value="1" /><span class="input-group-addon">K</span></div></div>
                </div>
              </form>
            <!--</div>-->
            <!--<h5>GNEB Parameters</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input-gneb-springconst" class="col-sm-6 control-label">Spring constant: </label><div class="col-sm-6"><input type="text" id="input-gneb-springconst" class="form-control" value="0.001" /></div>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="input-gneb-radio" id="input-gneb-radio-normal" value="normal" checked="checked">
                    Normal
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="input-gneb-radio" id="input-gneb-radio-climbing" value="climbing">
                    Climbing image
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="input-gneb-radio" id="input-gneb-radio-falling" value="falling">
                    Falling image
                  </label>
                </div>
              </form>
            </div>-->

          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-visualization">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-visualization" aria-expanded="true" aria-controls="collapse-visualization">
              Visualization
            </a>
          </h4>
        </div>
        <div id="collapse-visualization" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-visualization">
          <div class="panel-body">

            <h5>Renderers</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="select-rendermode" class="col-sm-6 control-label">Rendermode</label>
                  <div class="col-sm-6">
                    <select id="select-rendermode">
                      <option value="ARROWS">Arrows</option>
                      <option value="SURFACE">Surface</option>
                      <option value="SPHERE">Sphere</option>
                    </select>
                  </div>
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" checked="checked" id="input-show-boundingbox"> Show Bounding Box
                    </label>
                  </div>
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" id="input-show-coordinatesystem"> Show Coordinate System
                    </label>
                  </div>
                  <label for="select-colormap" class="col-sm-6 control-label">Coordinate System Position</label>
                  <div class="col-sm-6">
                    <select id="select-coordinatesystemwidget-position">
                      <option value="[0, 0.05, 0.2, 0.2]">Bottom left</option>
                      <option value="[0.8, 0.05, 0.2, 0.2]">Bottom right</option>
                      <option value="[0.8, 0.75, 0.2, 0.2]">Top right</option>
                      <option value="[0, 0.75, 0.2, 0.2]" selected="selected">Top left</option>
                    </select>
                  </div>
                  <div class="checkbox col-sm-12">
                    <label>
                      <input type="checkbox" checked="checked" id="input-show-spinspherewidget"> Show Spin Sphere/Surface Miniview
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="select-colormap" class="col-sm-6 control-label">Miniview Position</label>
                  <div class="col-sm-6">
                    <select id="select-spinspherewidget-position">
                      <option value="[0, 0.05, 0.2, 0.2]" selected="selected">Bottom left</option>
                      <option value="[0.8, 0.05, 0.2, 0.2]">Bottom right</option>
                      <option value="[0.8, 0.75, 0.2, 0.2]">Top right</option>
                      <option value="[0, 0.75, 0.2, 0.2]">Top left</option>
                    </select>
                  </div>
                </div>
              </form>
              <form class="form">
                <div class="form-group">
                  <label for="input-zrange-filter" class="control-label">Spin Sphere Point Size</label>
                  <div style="margin-left:20px;">
                    <input id="input-spinspherewidget-pointsize" type="text" class="span2" style="padding:2em" value="" data-slider-min="1" data-slider-max="10" data-slider-step="1" data-slider-value="[1,1]" data-slider-ticks="[1, 5, 10]"/>
                  </div>
                </div>
              </form>
            </div>
            <h5>Colors</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="select-colormap" class="col-sm-3 control-label">Colormap</label>
                  <div class="col-sm-9">
                    <select id="select-colormap">
                      <option value="hsv" selected="selected">Hue-Saturation-Value</option>
                      <option value="hue">Hue</option>
                      <option value="bluered">Blue-Red</option>
                      <option value="bluegreenred">Blue-Green-Red</option>
                      <option value="bluewhitered">Blue-White-Red</option>
                      <option value="red">Red</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="select-backgroundcolor" class="col-sm-6 control-label">Background</label>
                  <div class="col-sm-6">
                    <select id="select-backgroundcolor">
                      <option value="black">Black</option>
                      <option value="gray">Gray</option>
                      <option value="white" selected="selected">White</option>
                    </select>
                  </div>
                </div>
              </form>
            </div>
            <h5>Filter</h5>
            <div class="well well-sm">
              <form class="form">
                <div class="form-group">
                  <label for="input-zrange-filter" class="control-label">Z range:</label>
                  <div style="margin-left:20px;">
                    <input id="input-zrange-filter" type="text" class="span2" style="padding:2em" value="" data-slider-min="-1" data-slider-max="1" data-slider-step="0.01" data-slider-value="[-1,1]" data-slider-ticks="[-1,0, 1]"/>
                  </div>
                </div>
              </form>
            </div>
            <h5>Controls</h5>
            <div class="well well-sm">
              <form class="form-horizontal">
                <div class="form-group">
                <div class="checkbox col-sm-12">
                  <label>
                    <input type="checkbox" checked="checked" id="input-use-touch"> Use Touch Controls
                  </label>
                </div>
                </div>
              </form>
              <div class="text-center">Set Camera to axis:
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default" id="button-camera-x">X</button>
                  <button type="button" class="btn btn-default" id="button-camera-y">Y</button>
                  <button type="button" class="btn btn-default" id="button-camera-z">Z</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-about">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-about" aria-expanded="true" aria-controls="collapse-about">
              About Spirit
            </a>
          </h4>
        </div>
        <div id="collapse-about" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-about">
          <div class="panel-body">
            <h5>Spin Simulation Framework</h5>
            <p id="spirit-version">Spirit version x</p>
            <br>
            <p>Spirit is <strong>platform-independent, open-source</strong> code with optional visualization, written in C++11.
            The source code is available on <a href="https://github.com/spirit-code/spirit" title="spirit-code/spirit">GitHub</a> under the terms of the <a href="https://github.com/spirit-code/spirit/blob/master/LICENSE.txt" title="Spirit License">MIT license</a>.</p>
            <p>While this web-based demo version is limited to Spin Dynamics simulations, the Spirit code has been developed as a flexible solution to various use-cases, including:</p>
<ul>
    <li><strong>Spin Dynamics simulations</strong> obeying the <a href="https://en.wikipedia.org/wiki/Landau%E2%80%93Lifshitz%E2%80%93Gilbert_equation" title="Landau-Lifschitz-Gilbert equation - Wikipedia">Landau-Lifschitz-Gilbert equation</a></li>
    <li>Direct <strong>Energy minimisation</strong> of a spin system</li>
    <li><strong>Minimum Energy Path calculations</strong> for transitions between different spin configurations, using the GNEB method</li>
</ul>
<p>More details may be found on <a href="https://github.com/spirit-code/spirit" title="spirit-code/spirit">GitHub</a> or in the <a href="https://iffwiki.fz-juelich.de/index.php/Spirit" title="Spirit - iffwiki">Wiki</a>.</p>
<p>Main author of the Spirit code is Gideon Müller (<a href="http://www.fz-juelich.de/pgi/pgi-1/EN/Home/home_node.html" title="PGI-1">Quantum Theory of Materials</a> department of the <a href="http://www.fz-juelich.de/pgi/EN/Home/home_node.html" title="PGI">Peter Grünberg Institute </a>).</p>
<p>The Web Interface is being developed by Florian Rhiem (<a href="https://pgi-jcns.fz-juelich.de/portal/pages/about.html" title="PGI-JCNS">Scientific IT-Systems, PGI/JCNS Technical Services and Administration</a>).</p>
<p>For a full list of contributors and affiliations, see <a href="https://github.com/spirit-code/spirit/blob/master/docs/CONTRIBUTORS.md" title="Contributors">here</a>.</p>
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>
<div id="div-load">Initializing Spirit simulation...</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="js/webglspins.js"></script>
<script src="js/simulation.js"></script>
<script src="spirit.js" async></script>
<script src="js/ui.js"></script>

</body>
</html>
